<template>
  <div ref="ShowHidden" :style="styleMapState" class="map-state">
    <el-button
      v-if="leftShow"
      :style="style"
      circle
      class="ShowHidden"
      icon="el-icon-d-arrow-left"
      type="primary"
      @click="handlerShowHidden(0)"
    ></el-button>
    <el-button
      v-else
      :style="style"
      circle
      class="ShowHidden"
      icon="el-icon-d-arrow-right"
      type="primary"
      @click="handlerShowHidden(1)"
    ></el-button>
    <el-form
      :key="currentDataTaskPlanName"
      ref="form"
      label-width="80px"
      size="mini"
    >
      <el-form-item label="选择镇街">
        <el-select
          v-model="townCode"
          :disabled="disabled"
          filterable
          placeholder="请选择"
          @change="toVillage"
        >
          <el-option
            v-for="item in town"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="village.length" label="选择村居">
        <el-select
          v-model="villageCode"
          :disabled="disabledv"
          filterable
          placeholder="请选择"
          @change="toSearch"
        >
          <el-option
            v-for="item in village"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
<!-- v-if="pattern" -->
      <el-form-item v-if="pattern"  label="图斑状态">
        <el-select v-model="spotstateName" placeholder="请选择图斑状态">
          <el-option
            v-for="item in spotstate"
            :key="item.pvCode"
            :label="item.propertyValue"
            :value="item.pvCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="任务模式">
        <!-- @change="changeModel" -->
        <el-select v-model="taskmodelName" placeholder="请选择任务模式">
          <el-option
            v-for="item in taskmodel"
            :key="item.pvCode"
            :label="item.propertyValue"
            :value="item.pvCode"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="pattern" label="当前任务">
        <el-input v-model="currentDataTaskPlanName" :disabled="true"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  props: {
    currentTask: {
      type: Object,
      default: function () {
        return {};
      },
    },
    userInfo: {
      required: true,
      type: Object,
      default: function () {
        return {};
      },
    },
    taskObject: {
      type: Object,
    },
    currentSystem: {
      type: String,
    },
    SearchMap: {
      type: Array,
    },
  },
  components: {},
  data: () => ({
    leftShow: true,
    styleMapState: {},
    style: {},
    pattern: true,
    disabled: false,
    disabledv: false,
    taskmodel: [],
    taskmodelName: "",
    currentMode: {},
    spotstate: [],
    spotstateName: "",
    spotstateObject: {
      P1001: {
        collectStatus: "",
        auditStatus: "",
      },
      P1002: {
        collectStatus: 2,
        auditStatus: "",
      },
      P1003: {
        collectStatus: 1,
        auditStatus: "",
      },
      P1004: {
        collectStatus: "",
        auditStatus: 2,
      },
      P1005: {
        collectStatus: 2,
        auditStatus: 1,
      },
      P1006: {
        collectStatus: "",
        auditStatus: 3,
      },
    },
    activeNames: ["1"],
    town: [
      {
        label: "全部",
        value: "440605",
      },
    ],
    townCode: "",
    village: [],
    villageCode: "",
    currentDataTask: {
      area: "",
      collectTaskLandRs: "",
      collectTasks: "",
      createPerson: "",
      createTime: "",
      dataCount: "",
      id: "",
      ossImgList: "",
      planCode: "",
      planEndTime: "",
      planFiles: "",
      planName: "",
      planRequire: "",
      planStartTime: "",
      planStatus: "",
      planType: "",
      treeData: "",
      updatePerson: "",
      updateTime: "",
    },
    mapCenter: [
      {
        label: "全部",
        value: "440605",
        center: [113.02151029197415, 22.900558123212093],
      },
      {
        label: "九江镇",
        value: "440605121",
        center: [112.993321, 22.856176],
      },
      {
        label: "南樵镇",
        value: "440605127",
        center: [112.872017, 22.861839],
      },
      {
        label: "西樵镇",
        value: "440605122",
        center: [112.94087, 22.93736],
      },
      {
        label: "桂城街道",
        value: "440605011",
        center: [113.183875, 23.03225],
      },
      {
        label: "丹灶镇",
        value: "440605123",
        center: [112.921315, 23.059877],
      },
      {
        label: "大沥镇",
        value: "440605125",
        center: [113.121615, 23.114786],
      },
      {
        label: "狮山镇",
        value: "440605124",
        center: [113.012359, 23.160829],
      },
      {
        label: "里水镇",
        value: 440605126,
        center: [113.136793, 23.227369],
      },
    ],
    sizeForm: {
      name: "",
      region: "",
      date1: "",
      date2: "",
      delivery: false,
      type: [],
      resource: "",
      desc: "",
    },
    planName: "",
  }),
  computed: {
    currentDataTaskPlanName() {
      let planName = null;
      if (!this.currentDataTask.planName) {
        return planName;
      }
      if (this.currentDataTask.planName.length > 19) {
        planName = this.currentDataTask.planName.substring(0, 19) + "...";
      } else {
        planName = this.currentDataTask.planName;
      }
      return planName;
    },
  },

  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.selectPageTaskmodel();
        this.selectPageSpotstate();
        this.toTown();
        if (this.currentTask) {
          this.currentDataTask = this.currentTask.data;
        }
      }, 500);
    });
    this.HighlyDynamic();
  },
  methods: {
    handlerShowHidden(n) {
      this.leftShow = !this.leftShow;
      let left = 0,
        transition;
      if (n === 1) {
        left = "0";
        transition = "left 800ms";
      } else {
        left = "-360px";
        transition = "left 200ms";
      }
      this.styleMapState = {
        left,
        transition,
      };
      console.log(this.styleMapState);
    },
    HighlyDynamic() {
      this.$nextTick(() => {
        if (this.$refs.ShowHidden.offsetWidth) {
          this.style = {
            left: this.$refs.ShowHidden.offsetWidth + 10 + "px",
            opacity: 1,
          };
        }
      });
      console.log(this.style);
    },
    toSearch() {},
    toTown() {
      this.$common.municipality("440605").then((res) => {
        if (res.errorCode === "00000") {
          res.data.forEach((item) => {
            this.town.push({
              label: item.administrativeName,
              value: item.administrativeCode,
            });
          });
          this.townCode = "440605";
        }
      });

      console.log(this.mapCenter, this.town);
    },
    toVillage(pid) {
      this.village = [];
      if (pid === "440605") {
        this.villageCode = "";
        return false;
      }
      this.$common.municipality(pid).then((res) => {
        if (res.errorCode === "00000") {
          res.data.forEach((item) => {
            this.village.push({
              label: item.administrativeName,
              value: item.administrativeCode,
              center:[item.latitude,item.dimensionality]
            });
          });
          this.village.unshift({
            label: "全部",
            value: this.village[0].value.substring(0, 9),
          });
          // this.villageCode = this.village[0].value.substring(0, 9);
        }
      });
    },
    selectPageTaskmodel() {
      this.$common
        .selectPage({
          ptCode: "P111",
          pageNumber: 1,
          pageSize: 15,
        })
        .then((res) => {
          if (res.errorCode === "00000") {
            this.taskmodel = res.data.list;
            if (this.userInfo.userLevel > 3) {
              this.taskmodelName = this.taskmodel[0].pvCode;
              this.$store.dispatch("taskmodel/getTaskModel", this.taskmodel[0]);
            } else {
              this.taskmodelName = this.taskmodel[1].pvCode;
              this.$store.dispatch("taskmodel/getTaskModel", this.taskmodel[1]);
            }
          }
        });
    },
    selectPageSpotstate() {
      this.$common
        .selectPage({
          ptCode: "P10",
          pageNumber: 1,
          pageSize: 15,
        })
        .then((res) => {
          if (res.errorCode === "00000") {
            this.spotstate = res.data.list;
            if (this.userInfo.userLevel > 3) {
                this.spotstateName = this.spotstate[2].pvCode;

            }else{
              this.spotstateName = this.spotstate[0].pvCode;
            }
           
          }
        });
    },
    handleChange(val) {
      console.log(val);
    },
    onSubmit() {
      console.log("submit!");
    },
  },
  watch: {
    "taskObject.pvCode": {
      handler() {
        this.taskmodelName = this.taskObject.pvCode;
      },
      deep: true,
    },
    "currentTask.data.planName": {
      handler() {
        this.currentDataTask = this.currentTask.data;
      },
      deep: true,
    },
    spotstateName() {
      for (const key in this.spotstateObject) {
        if (key === this.spotstateName) {
          this.$emit("on-filterMap", this.spotstateObject[key]);
        }
      }
    },
    taskmodelName() {
      console.log(this.spotstate);
      let p = ["P11101", "P11102"];
      let e = this.taskmodelName;
      this.currentMode = this.taskmodel.filter((item) => {
        return this.taskmodelName === item.pvCode;
      });
      if (e === p[1]) {
        this.spotstateName = this.spotstate[0].pvCode;
        this.$store.dispatch("currentTask/removeAsyncCurrentTask").then(() => {
          this.$store
            .dispatch("taskmodel/getTaskModel", this.currentMode[0])
            .then(() => {
              this.$emit("on-change", {
                activeName: "dataview",
                DKBHID: [],
                SearchMap: this.SearchMap,
                zoom: 10,
                center: [113.0253242, 23.0778715],
              });
              this.pattern = false;
            });
        });
        // 数据查看模式
      } else if (e === p[0]) {
        this.spotstateName = this.spotstate[2].pvCode;
        this.$store
          .dispatch("taskmodel/getTaskModel", this.currentMode[0])
          .then(() => {
            this.$emit("on-change", {
              activeName: "underway",
              state: e,
            });
            this.pattern = true;
          });
      } else {
        // 强行进入任务执行模式
        this.pattern = true;
        this.taskmodelName = p[0];
      }
    },
    townCode() {
      this.villageCode = "";
      if (this.userInfo.userLevel == 4 || this.userInfo.userLevel == 5) {
        this.townCode = this.userInfo.administrativeCode;
        this.villageCode = this.userInfo.administrativeCode;
        this.disabled = true;
      }

      if (this.userInfo.userLevel == 5) {
        this.townCode = this.userInfo.administrativeCode.substring(0, 9);
        this.villageCode = this.userInfo.administrativeCode;
        this.disabledv = true;
      }

      this.toVillage(this.townCode);
      let payload = this.town.filter((item) => {
        return this.townCode === item.value;
      });
      // console.log(payload[0]);
      this.mapCenter.forEach((item) => {
        if (item.value === payload[0].value) {
          payload[0].center = item.center;
        }
      });

      if (payload[0].label != "全部") {
        payload[0].filter = ["in", "XZBH", payload[0].value + "000"];
      } else {
        payload[0].filter = this.SearchMap;
      }
      payload[0].XZBH = payload[0].value;
      payload[0].CJBH = "";
      this.$emit("on-select-map", payload[0]);
      this.$store.dispatch("getTreeData/setAsyncThecurrenttown", payload[0]);
    },
    villageCode() {
      let payload = [];
      setTimeout(() => {
        payload = this.village.filter((item) => {
          return this.villageCode === item.value;
        });


        
        if(payload[0].center[0] === null || payload[0].center[1] === null){
          this.mapCenter.forEach((item) => {
            if (item.value === payload[0].value.substring(0, 9)) {
              payload[0].center = item.center;
              console.log('出现这里表示村居没有经纬度，获取镇中心位置');
            }
          });
        }else{
          console.log('出现这里表示村居有经纬度，获取村中心位置'+payload[0].center);
        }

        if (payload[0].label === "全部") {
          payload[0].filter = ["in", "XZBH", payload[0].value + "000"];
        } else {
          payload[0].filter = ["in", "CJBH", payload[0].value];
        }
        payload[0].CJBH = payload[0].value;
        payload[0].XZBH = payload[0].value.substring(0, 9);
        this.$emit("on-select-map", payload[0]);
        this.$store.dispatch("getTreeData/setThecurrentvillage", payload[0]);
      }, 1000);
    },
  },
};
</script>

<style lang="scss" scoped>
.el-form {
  padding: 15px;
}

.map-state {
  position: relative;
  left: 0;
  transition: left 600ms;

  .ShowHidden {
    position: absolute;
    opacity: 0;
    top: 0;
    transition: width 600ms;
    background: #eee;
  }
}
</style>
